<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUIEx API - zh_CN</title>
<meta http-equiv="keywords"
	content="easyuiex,uiEx,EasyUI,EasyProject,Easy Project">
<meta http-equiv="description"
	content="easyuiex: jQuery EasyUI 简化扩展架构插件  API">
<meta http-equiv="author" content="inthinkcolor@gmail.com">

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
	


	$(function(){
		
		var titles={
				use_step:"EasyUIEx Use Step",
				two_way:"EasyUIEx API Invoke",
				global_config:"API Global Configuration Parameter",
				messager:"alter、 confirm、 prompt、 msg Messager API",
				dialog:"dialog API",
				form:"form API",
				tabs:"tab API",
				datagrid:"datagrid、edatagrid、detaildatagrid API",
				treegrid:"treegrid API",
				tree:"tree API",
				checkboxtree:"Checkbox tree API",
				validate:"Custom validator",
				others:"Other API"
				
		}
		
		var def="use_step";//使用步骤
		var now=$("[show='"+def+"']");
		
		$("#content_show").html($("#"+def).html()); 
		now.addClass('sel'); 
		
		$("#menu ul li").not(".tit").on("click",function(){
			var o=$(this);
			$("#content_show").css({height:"90%"});
			$("#content_show").html($("#"+o.attr("show")).html()); 
			$("#content .tit").html(titles[o.attr("show")]);
			now.removeClass("sel");
			now=o;
			now.addClass('sel'); 
		});
	});

</script>



<style type="text/css">
body {
	color: #333;
	font: 13px/1.4 "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
	padding: 0;
	margin: 0;
}

a {
	background: transparent;
	color: #4183c4;
	text-decoration: none;
}

a:active,
a:hover {
	outline: 0 none;
	text-decoration: underline;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}
mark {
	background: #ff0;
	color: #000;
}
small {
	font-size: 80%;
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
img {
	border: 0 none;
}
svg:not(:root) {
	overflow: hidden;
}
figure {
	margin: 1em 40px;
}
hr {
	box-sizing: content-box;
	height: 0;
}

code,
kbd,
pre,
samp {
	font-family: monospace,monospace;
	font-size: 1em;
}

pre {
	overflow: auto;
	font: 12px Consolas,"Liberation Mono",Menlo,Courier,monospace;
	margin-bottom: 0;
	margin-top: 0;
}

.markdown-body {
	padding: 30px;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
}

.markdown-body>*:first-child {
	margin-top: 0 !important;
}

.markdown-body>*:last-child {
	margin-bottom: 0 !important;
}

.markdown-body .absent {
	color: #c00;
}

.markdown-body .anchor {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: block;
	padding-right: 6px;
	padding-left: 30px;
	margin-left: -30px;
}

.markdown-body .anchor:focus {
	outline: none;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
	position: relative;
	margin-top: 1em;
	margin-bottom: 16px;
	font-weight: bold;
	line-height: 1.4;
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
	display: none;
	color: #000;
	vertical-align: middle;
}

.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
	padding-left: 8px;
	margin-left: -30px;
	line-height: 1;
	text-decoration: none;
}

.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
	display: inline-block;
}

.markdown-body h1 tt,
.markdown-body h1 code,
.markdown-body h2 tt,
.markdown-body h2 code,
.markdown-body h3 tt,
.markdown-body h3 code,
.markdown-body h4 tt,
.markdown-body h4 code,
.markdown-body h5 tt,
.markdown-body h5 code,
.markdown-body h6 tt,
.markdown-body h6 code {
	font-size: inherit;
}

.markdown-body h1 {
	padding-bottom: 0.3em;
	font-size: 2.25em;
	line-height: 1.2;
	border-bottom: 1px solid #eee;
}

.markdown-body h2 {
	padding-bottom: 0.3em;
	font-size: 1.75em;
	line-height: 1.225;
	border-bottom: 1px solid #eee;
}

.markdown-body h3 {
	font-size: 1.5em;
	line-height: 1.43;
}

.markdown-body h4 {
	font-size: 1.25em;
}

.markdown-body h5 {
	font-size: 1em;
}

.markdown-body h6 {
	font-size: 1em;
	color: #777;
}

.markdown-body p,.markdown-body blockquote,
.markdown-body ul,.markdown-body ol,
.markdown-body dl,.markdown-body table,
.markdown-body pre {
	margin-top: 0;
	margin-bottom: 16px;
}

.markdown-body hr {
	height: 4px;
	padding: 0;
	margin: 16px 0;
	background-color: #e7e7e7;
	border: 0 none;
}

.markdown-body ul,
.markdown-body ol {
	padding-left: 2em;
}

.markdown-body ul.no-list,
.markdown-body ol.no-list {
	padding: 0;
	list-style-type: none;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
	margin-top: 0;
	margin-bottom: 0;
}

.markdown-body li>p {
	margin-top: 16px;
}

.markdown-body dl {
	padding: 0;
}

.markdown-body dl dt {
	padding: 0;
	margin-top: 16px;
	font-size: 1em;
	font-style: italic;
	font-weight: bold;
}

.markdown-body dl dd {
	padding: 0 16px;
	margin-bottom: 16px;
}

.markdown-body blockquote {
	padding: 0 15px;
	color: #777;
	border-left: 4px solid #ddd;
}

.markdown-body blockquote>:first-child {
	margin-top: 0;
}

.markdown-body blockquote>:last-child {
	margin-bottom: 0;
}

.markdown-body table {
	display: block;
	width: 100%;
	overflow: auto;
	word-break: normal;
	word-break: keep-all;
}

.markdown-body table th {
	font-weight: bold;
}

.markdown-body table th,
.markdown-body table td {
	padding: 6px 13px;
	border: 1px solid #ddd;
}

.markdown-body table tr {
	background-color: #fff;
	border-top: 1px solid #ccc;
}

.markdown-body table tr:nth-child(2n) {
	background-color: #f8f8f8;
}

.markdown-body img {
	max-width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.markdown-body span.frame {
	display: block;
	overflow: hidden;
}

.markdown-body span.frame>span {
	display: block;
	float: left;
	width: auto;
	padding: 7px;
	margin: 13px 0 0;
	overflow: hidden;
	border: 1px solid #ddd;
}

.markdown-body span.frame span img {
	display: block;
	float: left;
}

.markdown-body span.frame span span {
	display: block;
	padding: 5px 0 0;
	clear: both;
	color: #333;
}

.markdown-body span.align-center {
	display: block;
	overflow: hidden;
	clear: both;
}

.markdown-body span.align-center>span {
	display: block;
	margin: 13px auto 0;
	overflow: hidden;
	text-align: center;
}

.markdown-body span.align-center span img {
	margin: 0 auto;
	text-align: center;
}

.markdown-body span.align-right {
	display: block;
	overflow: hidden;
	clear: both;
}

.markdown-body span.align-right>span {
	display: block;
	margin: 13px 0 0;
	overflow: hidden;
	text-align: right;
}

.markdown-body span.align-right span img {
	margin: 0;
	text-align: right;
}

.markdown-body span.float-left {
	display: block;
	float: left;
	margin-right: 13px;
	overflow: hidden;
}

.markdown-body span.float-left span {
	margin: 13px 0 0;
}

.markdown-body span.float-right {
	display: block;
	float: right;
	margin-left: 13px;
	overflow: hidden;
}

.markdown-body span.float-right>span {
	display: block;
	margin: 13px auto 0;
	overflow: hidden;
	text-align: right;
}

.markdown-body code,.markdown-body tt {
	padding: 0;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	margin: 0;
	font-size: 85%;
	background-color: rgba(0,0,0,0.04);
	border-radius: 3px;
}

.markdown-body code:before,
.markdown-body code:after,
.markdown-body tt:before,
.markdown-body tt:after {
	letter-spacing: -0.2em;
	content: "\00a0";
}

.markdown-body code br,
.markdown-body tt br {
	display: none;
}

.markdown-body del code {
	text-decoration: inherit;
}

.markdown-body pre>code {
	padding: 0;
	margin: 0;
	font-size: 100%;
	word-break: normal;
	white-space: pre;
	background: transparent;
	border: 0;
}

.markdown-body .highlight {
	margin-bottom: 16px;
}

.markdown-body .highlight pre,
.markdown-body pre {
	padding: 16px;
	overflow: auto;
	font-size: 85%;
	line-height: 1.45;
	background-color: #f7f7f7;
	border-radius: 3px;
}

.markdown-body .highlight pre {
	margin-bottom: 0;
	word-break: normal;
}

.markdown-body pre {
	word-wrap: normal;
}

.markdown-body pre code,
.markdown-body pre tt {
	display: inline;
	max-width: initial;
	padding: 0;
	margin: 0;
	overflow: initial;
	line-height: inherit;
	word-wrap: normal;
	background-color: transparent;
	border: 0;
}

.markdown-body pre code:before,
.markdown-body pre code:after,
.markdown-body pre tt:before,
.markdown-body pre tt:after {
	content: normal;
}

.highlight .pl-coc,
.highlight .pl-entl,
.highlight .pl-entm,
.highlight .pl-eoa,
.highlight .pl-mai .pl-sf,
.highlight .pl-mm,
.highlight .pl-pdv,
.highlight .pl-sc,
.highlight .pl-som,
.highlight .pl-sr,
.highlight .pl-v,
.highlight .pl-vpf {
	color: #0086b3;
}
.highlight .pl-eoac,
.highlight .pl-mdht,
.highlight .pl-mi1,
.highlight .pl-mri,
.highlight .pl-va,
.highlight .pl-vpu {
	color: #008080;
}
.highlight .pl-c,
.highlight .pl-pdc {
	color: #b4b7b4;
	font-style: italic;
}
.highlight .pl-k,
.highlight .pl-ko,
.highlight .pl-kolp,
.highlight .pl-mc,
.highlight .pl-mr,
.highlight .pl-ms,
.highlight .pl-s,
.highlight .pl-sok,
.highlight .pl-st {
	color: #6e5494;
}
.highlight .pl-ef,
.highlight .pl-enf,
.highlight .pl-enm,
.highlight .pl-entc,
.highlight .pl-eoi,
.highlight .pl-sf,
.highlight .pl-smc {
	color: #d12089;
}
.highlight .pl-ens,
.highlight .pl-eoai,
.highlight .pl-kos,
.highlight .pl-mh .pl-pdh,
.highlight .pl-mp,
.highlight .pl-pde,
.highlight .pl-stp {
	color: #458;
}
.highlight .pl-enti {
	color: #d12089;
	font-weight: bold;
}
.highlight .pl-cce,
.highlight .pl-enc,
.highlight .pl-kou,
.highlight .pl-mq {
	color: #f93;
}
.highlight .pl-mp1 .pl-sf {
	color: #458;
	font-weight: bold;
}
.highlight .pl-cos,
.highlight .pl-ent,
.highlight .pl-md,
.highlight .pl-mdhf,
.highlight .pl-ml,
.highlight .pl-pdc1,
.highlight .pl-pds,
.highlight .pl-s1,
.highlight .pl-scp,
.highlight .pl-sol {
	color: #df5000;
}
.highlight .pl-c1,
.highlight .pl-cn,
.highlight .pl-pse,
.highlight .pl-pse .pl-s2,
.highlight .pl-vi {
	color: #a31515;
}
.highlight .pl-mb,
.highlight .pl-pdb {
	color: #df5000;
	font-weight: bold;
}
.highlight .pl-mi,
.highlight .pl-pdi {
	color: #6e5494;
	font-style: italic;
}
.highlight .pl-ms1 {
	background-color: #f5f5f5;
}
.highlight .pl-mdh,
.highlight .pl-mdi {
	font-weight: bold;
}
.highlight .pl-mdr {
	color: #0086b3;
	font-weight: bold;
}
.highlight .pl-s2 {
	color: #333;
}
.highlight .pl-ii {
	background-color: #df5000;
	color: #fff;
}
.highlight .pl-ib {
	background-color: #f93;
}
.highlight .pl-id {
	background-color: #a31515;
	color: #fff;
}
.highlight .pl-iu {
	background-color: #b4b7b4;
}
.highlight .pl-mo {
	color: #969896;
}
html, body {
	padding: 0px;
	margin: 0px;
	height: 100%;
	font-family: '微软雅黑','宋体',Arial,sans-serif,Verdana,Tahoma
}


#body {
	height: 100%
}

#header {
	background-color: #FF1484;
	font-size: 40px;
	font-weight: bold;
	color: #fff;
	padding: 10px;
	height: 10%;
	min-height: 60px;
}

#header span {
	font-size: 16px;
	font-weight: normal;
}

#container {
	overflow: hidden;
	margin: 0 auto;
	height: 85%;
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: auto;
	height: 100%;
}

#menu ul li {
	list-style: none;
	margin: 0;
	padding: 5px;
}

#menu {
	float: left;
	min-width: 150px;
	text-align: left;
	border: 1px solid #ccc;
	min-height: 50px;
	height: 100%;
	max-height: 100%;
}
#menu li[show]{
	cursor: pointer;
}

#menu li.tit {
	color: #777777;
	font-size: 13px;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
}
#menu li.ctl {
	color: #777777;
	font-size: 12px;
	border-bottom: 1px solid #ccc;
	border-left:4px solid #ccc;
	font-weight: bold;
}
#menu li.ctl:hover {
	color: #333333;
	font-size: 12px;
	border-bottom: 1px solid #ccc;
	border-left:4px solid #ccc;
	font-weight: bold;
}

#content {
	margin-left: 155px;
	border: 1px solid #ccc;
	font-size: 14px;
	 height: 100%;
}
#content_show{ overflow: auto; height: 90%; padding: 10px 10px; }

#content .tit {
	margin: 0;
	border: 1px solid #ccc;
	border-left:0px;
	border-right:0px;
	font-weight: bold;
	font-size: 23px;
	padding: 4px 10px;
	background-color: #F8F8F8;
}


.content_hide{display: none}
.sel{color: #0086CE !important; font-size: 13px !important;}
</style>


<script type="text/javascript">

function getDocumentScrollTop() 
{
   var res = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0;
   // alert(res);
   return res;
}

function setDocumentScrollTop(ypos) 
{
	window.scrollTo(0, ypos);
}

</script>


</head>
<body class="">

	<div id="body">
		<div id="header">
			EasyUIEx API <span>jQuery EasyUI Simplify&Extended
				Architecture plugin</span>  <span>
				<a href="easyuiex-api_zh_CN.html" title="中文 API"
				 style="color:#fff;font-weight: bold;text-decoration: underline;">中文</a> 
				 |  
				 <a href="easyuiex-api_en.html" title="English API"
				 style="color:#fff;font-weight: bold;text-decoration: underline;">English</a>
				 |  
				 <a href="http://easyproject.cn/easyuiex" title="English API" target="_blank"
				 style="color:#fff;font-weight: bold;text-decoration: underline;">Home</a>
				 </span>
		</div>
		
		<div id="container">
			<div id="menu">
				<ul>
					<li class="tit">Plugins</li>
					<li class="ctl" show="use_step">EasyUIEx Use</li>
					<li class="ctl" show="two_way">EasyUIEx API Invoke</li>
					<li class="ctl" show="global_config">Global Parameters</li>
					<li class="ctl" show="messager">Messager</li>
					<li class="ctl" show="dialog">Dialog</li>
					<li class="ctl" show="form">Form</li>
					<li class="ctl" show="tabs">Tabs</li>
					<li class="ctl" show="datagrid">Datagrid</li>
					<li class="ctl" show="treegrid">Treegrid</li>
					<li class="ctl" show="tree">Tree</li>
					<li class="ctl" show="checkboxtree">Checkbox Tree</li>
					<li class="ctl" show="validate">Validate</li>
					<li class="ctl" show="others">Others</li>
				</ul>
			</div>


			<div id="content">
				<div class="tit">EasyUIEx Use Step</div>
				<div id="content_show" class="markdown-body">
				
				
				</div>
			</div>
		</div>
	</div>	

<div class="content_hide" id="use_step">
	<p>With the use of <code>easy.jquery.edatagrid.js</code> instead of<code>jquery.edatagrid.js</code>, easyUIEx of edatagrid performance and logic optimization and provides additional functionality.</p> 
<div class="highlight highlight-text-html-basic">
 <pre><span class="pl-c">&lt;!-- EasyUI CSS --&gt;</span>
&lt;<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>stylesheet<span class="pl-pds">&quot;</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>text/css<span class="pl-pds">&quot;</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyui/themes/bootstrap/easyui.css<span class="pl-pds">&quot;</span></span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>themeLink<span class="pl-pds">&quot;</span></span>&gt;
&lt;<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>stylesheet<span class="pl-pds">&quot;</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>text/css<span class="pl-pds">&quot;</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyui/themes/icon.css<span class="pl-pds">&quot;</span></span>&gt;

<span class="pl-c">&lt;!-- EasyUI JS &amp; Extension JS...--&gt;</span>
&lt;<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>text/javascript<span class="pl-pds">&quot;</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyui/jquery.min.js<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">script</span>&gt;
&lt;<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>text/javascript<span class="pl-pds">&quot;</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyui/jquery.easyui.min.js<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">script</span>&gt;
&lt;<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>text/javascript<span class="pl-pds">&quot;</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyui/locale/easyui-lang-zh_CN.js<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">script</span>&gt;

<span class="pl-c">&lt;!-- **EasyUIEx** --&gt;</span>
&lt;<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>stylesheet<span class="pl-pds">&quot;</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>text/css<span class="pl-pds">&quot;</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyuiex/css/easyuiex.css<span class="pl-pds">&quot;</span></span>&gt;
&lt;<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>text/javascript<span class="pl-pds">&quot;</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyuiex/easy.easyuiex.min.js<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">script</span>&gt;
&lt;<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>text/javascript<span class="pl-pds">&quot;</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyuiex/easy.easyuiex-validate.js<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">script</span>&gt;
<span class="pl-c">&lt;!-- EasyUIEx 'easy.jquery.edatagrid.js' instead of 'jquery.edatagrid.js' --&gt;</span>
&lt;<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>text/javascript<span class="pl-pds">&quot;</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyuiex/easy.jquery.edatagrid.js<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">script</span>&gt;
<span class="pl-c">&lt;!-- Language file --&gt;</span>
&lt;<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>text/javascript<span class="pl-pds">&quot;</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyuiex/lang/easy.easyuiex-lang-zh_CN.js<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">script</span>&gt; </pre>
</div> 
</div>



<div id="two_way" class="content_hide">
<p><strong>uiEx</strong> is the default namespace name EasyUIEx of. EasyUIEx API for DOM operation in extended function with selector selectors are supported calls in two ways.</p> 
<blockquote> 
 <p>*<em>Note: Please set id attribute for dom element. *</em> </p> 
</blockquote> 
<ul> 
 <li> <p><strong>Directly within uiEx namespace</strong></p> <p>The first argument is dom selector.</p> <p><code>uiEx.{methodName}(selector, [param1], ....);</code> </p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-smi">uiEx</span>.<span class="pl-en">clearForm</span>(<span class="pl-s"><span class="pl-pds">'</span>#userForm<span class="pl-pds">'</span></span>)；

<span class="pl-smi">uiEx</span>.<span class="pl-en">treeChk</span>(
 <span class="pl-s"><span class="pl-pds">&quot;</span>#rightsTree<span class="pl-pds">&quot;</span></span>,
 {
    url<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">&quot;</span>do/menuJson.json<span class="pl-pds">&quot;</span></span>
 },
 [<span class="pl-c1">11</span>]
);</pre>
  </div> </li> 
 <li> <p><strong>Within jQuery function extend</strong></p> <p><code>$(selector).{methodName}([param1], ....);</code></p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">'</span>#userForm<span class="pl-pds">'</span></span>).<span class="pl-en">clearForm</span>();

<span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#rightsTree<span class="pl-pds">&quot;</span></span>).<span class="pl-en">treeChk</span>(
    {
        url<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">&quot;</span>do/menuJson.json<span class="pl-pds">&quot;</span></span>
    },
    [<span class="pl-c1">11</span>]
);</pre>
  </div> </li>  
</ul> 

</div>

<div id="global_config" class="content_hide">
<ul> 
 <li> <p><strong>Message international configuration</strong></p> <p>Modify in lang / easy.easyuiex-lang-<code>LANG_COUNTRY</code>.js</p> </li> 
 <li> <p><strong>Global configuration parameters</strong></p> <p>can be adjusted EasyUIEx operating parameters, methods and content, modify parameters:</p> <p><code>uiEx.{paramName} = paramValue</code></p> <p>See note specific role, the following default configuration:</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-k">var</span> uiEx <span class="pl-k">=</span> {
  <span class="pl-c">/*</span>
<span class="pl-c">   * ################# Message content and control section</span>
<span class="pl-c">   */</span>
  showRowEditMsg <span class="pl-k">:</span> <span class="pl-c1">false</span>, <span class="pl-c">// After editing the line whether prompt msg</span>
  showRowAddMsg <span class="pl-k">:</span> <span class="pl-c1">false</span>, <span class="pl-c">// Whether to add the line after the prompt msg</span>
  showRowDeleteMsg <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Whether to delete the line after the prompt msg</span>
  <span class="pl-c">/*</span>
<span class="pl-c">   * ################# The default parameters to customize the message box</span>
<span class="pl-c">   */</span>
  msgDefaults <span class="pl-k">:</span> {
      timeout <span class="pl-k">:</span> <span class="pl-c1">4000</span>,
      showType <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>slide<span class="pl-pds">'</span></span> <span class="pl-c">// null、slide、fade、show。 Default is slide。</span>
  <span class="pl-c">// width:250,</span>
  <span class="pl-c">// height:100,</span>

  },
  <span class="pl-c">/*</span>
<span class="pl-c">   * ################# Data Grid default parameters</span>
<span class="pl-c">   */</span>
  dataGridDefaults <span class="pl-k">:</span> {
      rownumbers <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Show Line Numbers</span>
      fitColumns <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Automatically expand or shrink the size of the column width to fit the grid and prevent the horizontal scroll bar</span>
      singleSelect <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Single Select</span>
      pagination <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Display pagination</span>
      method <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>post<span class="pl-pds">&quot;</span></span>, <span class="pl-c">// Submit Information</span>
      striped <span class="pl-k">:</span> <span class="pl-c1">true</span>
  <span class="pl-c">// Form stripes, alternating row colors parity</span>
  },
  <span class="pl-c">/*</span>
<span class="pl-c">   * ################# Data Grid default parameters detailed view</span>
<span class="pl-c">   */</span>
  detailDataGridDefaults <span class="pl-k">:</span> {
      rownumbers <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Show Line Numbers</span>
      fitColumns <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Automatically expand or shrink the size of the column width to fit the grid and prevent the horizontal scroll bar</span>
      singleSelect <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Single Select</span>
      pagination <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Display pagination</span>
      method <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>post<span class="pl-pds">&quot;</span></span>, <span class="pl-c">// Submit Information</span>
      striped <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Form stripes, alternating row colors parity</span>
      <span class="pl-c">// Return line detail content formatting functions</span>
      <span class="pl-en">detailFormatter</span> <span class="pl-k">:</span> <span class="pl-k">function</span>(<span class="pl-smi">index</span>, <span class="pl-smi">row</span>) {
          <span class="pl-k">return</span> <span class="pl-s"><span class="pl-pds">'</span>&lt;div class=&quot;ddv&quot;&gt;&lt;/div&gt;<span class="pl-pds">'</span></span>;
      }
  },
  <span class="pl-c">/*</span>
<span class="pl-c">   * ################# url use {expression} expression used when parsing regular</span>
<span class="pl-c">   */</span>
  expReg <span class="pl-k">:</span><span class="pl-sr"> <span class="pl-pds">/</span><span class="pl-cce">\{</span>(<span class="pl-c1">[<span class="pl-c1">\s\S</span>]</span><span class="pl-k">+?</span>)<span class="pl-cce">\}</span><span class="pl-pds">/</span>g</span>,
  <span class="pl-c">/*</span>
<span class="pl-c">   * ################# Verify prompt message</span>
<span class="pl-c">   */</span>
  msg <span class="pl-k">:</span> {}
};</pre>
  </div> </li> 
</ul> 
</div>

<div id="messager" class="content_hide">
<div class="highlight highlight-source-js">
 <pre>  <span class="pl-c">/**</span>
<span class="pl-c">   * alert</span>
<span class="pl-c">   * </span>
<span class="pl-c">   * <span class="pl-k">@param</span> msg Message Content</span>
<span class="pl-c">   * <span class="pl-k">@param</span> type Message Icon Type: error, info, question, warning</span>
<span class="pl-c">   * <span class="pl-k">@param</span> callback Callback</span>
<span class="pl-c">   */</span>
  <span class="pl-smi">uiEx</span>.<span class="pl-c1">alert</span>(msg, type, callback);

  <span class="pl-c">/**</span>
<span class="pl-c">   * confirm</span>
<span class="pl-c">   * </span>
<span class="pl-c">   * <span class="pl-k">@param</span> msg Message Content</span>
<span class="pl-c">   * <span class="pl-k">@param</span> callback Callback</span>
<span class="pl-c">   */</span>
  <span class="pl-smi">uiEx</span>.<span class="pl-c1">confirm</span>(msg, callback);

  <span class="pl-c">/**</span>
<span class="pl-c">   * prompt</span>
<span class="pl-c">   * </span>
<span class="pl-c">   * <span class="pl-k">@param</span> msg 消Message Content</span>
<span class="pl-c">   * <span class="pl-k">@param</span> callback Callback</span>
<span class="pl-c">   */</span>
  <span class="pl-smi">uiEx</span>.<span class="pl-c1">prompt</span>(msg, callback);

  <span class="pl-c">/**</span>
<span class="pl-c">   * msg</span>
<span class="pl-c">   * </span>
<span class="pl-c">   * <span class="pl-k">@param</span> msg Message Content</span>
<span class="pl-c">   * <span class="pl-k">@param</span> position topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight; Default is bottomRight</span>
<span class="pl-c">   * <span class="pl-k">@param</span> params msg The message box parameters</span>
<span class="pl-c">   */</span>
  <span class="pl-smi">uiEx</span>.<span class="pl-en">msg</span>(msg, position, params);</pre>
</div> 

</div>




<div id="dialog" class="content_hide">
<ul> 
 <li><p>Two ways to call</p></li> 
 <li> <p>Dialog EasyUI need to solve the problem defined in the global page, when you close a tab inside the loaded automatically destroyed Tab Dialog</p> 
  <blockquote> 
   <p>Closed tab, specify loaded automatically destroyed dialog, to prevent the repeated loading. Since the Dialog EasyUI after the label closed and will not be destroyed (easyUI when parsing dialog, regardless of where the definition dialog will be put body), so in order to prevent duplicate tab page defined at each load, usually by The following approaches: 1, the dialog into the main interface, rather than through the tab to load 2, refresh the tab through the time off to be destroyed before the dialog</p> 
  </blockquote> </li> 
 <li> <p>API</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/**</span>
<span class="pl-c">* show Dialog</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> dialogSelector dialog selector</span>
<span class="pl-c">* <span class="pl-k">@param</span> title </span>
<span class="pl-c">* <span class="pl-k">@return</span> dialog object</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">openDialog</span>(dialogSelector, title);

<span class="pl-c">/**</span>
<span class="pl-c">* show href in dialog</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> dialogSelector dialog selector</span>
<span class="pl-c">* <span class="pl-k">@param</span> href the request href</span>
<span class="pl-c">* <span class="pl-k">@param</span> title </span>
<span class="pl-c">* <span class="pl-k">@return</span> dialog object</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">openHrefDialog</span>(dialogSelector, href, title)

<span class="pl-c">/**</span>
<span class="pl-c">* close Dialog</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> dialogSelector dialog selector</span>
<span class="pl-c">* <span class="pl-k">@return</span> dialog object</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">closeDialog</span>(dialogSelector);</pre>
  </div> </li> 
</ul> 
</div>


<div id="form" class="content_hide">
<ul> 
 <li><p>Two ways to call</p></li> 
 <li> <p>Ajax form submit <code>EasyUIEx.submitAjax</code> and<code>EasyUIEx.submitURLAjax</code> encapsulated in a <code>xRequestedWith = XMLHttpRequest</code> parameters will be submitted along with the form to the server, the server side to help developers through<code></code>xRequestedWith parameter to determine whether the Ajax request.</p> 
  <blockquote> 
   <p>Submit EasyUI form components of form submission method has certain confusing and misleading. Its internal use of the iframe submit submit, is not really Ajax submission. So when a user on the server side when trying to pass the request header information (X-Requested-With = XMLHttpRequest) to determine whether a request submitted by Ajax, and can not accurately judge.</p> 
  </blockquote> <p>Meanwhile, uiEx Ajax form submission provides a global event handlers <code>formSubmitSuccess</code>, Ajax form submission can monitor the success of the event, registered global handler.</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/*</span>
<span class="pl-c">* EasyUIEx.submitAjax and EasyUIEx.submitURLAjax form using form submission succes successful global event registered a system must perform the function</span>
<span class="pl-c">* Global ajaxSuccess function similar to jQuery</span>
<span class="pl-c">* @param data Data form submitted to the successful return of Ajax data</span>
<span class="pl-c">*</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">formSubmitSuccess</span><span class="pl-k">=</span><span class="pl-k">function</span>(<span class="pl-smi">data</span>){
  <span class="pl-c">//...</span>
}</pre>
  </div> </li> 
 <li> <p>API</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/**</span>
<span class="pl-c">* Clear form</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> selector  </span>
<span class="pl-c">* <span class="pl-k">@return</span> form</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">clearForm</span>(selector);

<span class="pl-c">/**</span>
<span class="pl-c">* Reset form</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> selector</span>
<span class="pl-c">* <span class="pl-k">@return</span> form</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">resetForm</span>(selector);

<span class="pl-c">/**</span>
<span class="pl-c">* Enable validate</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> selector </span>
<span class="pl-c">* <span class="pl-k">@return</span> form</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">enableValidate</span>(selector);

<span class="pl-c">/**</span>
<span class="pl-c">* Disable validate</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> selector </span>
<span class="pl-c">* <span class="pl-k">@return</span> form</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">disableValidate</span>(selector);

<span class="pl-c">/**</span>
<span class="pl-c">* To validate form</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> selector </span>
<span class="pl-c">* <span class="pl-k">@return</span> form</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">validate</span>(selector);

<span class="pl-c">/**</span>
<span class="pl-c">* Instead of the form (&quot;load&quot;, data); for form filling data</span>
<span class="pl-c">* You can specify the form name prefix, will fill the data to the specified prefix attribute to</span>
<span class="pl-c">* As the name attribute value data in the fill to user.name</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> selector </span>
<span class="pl-c">* <span class="pl-k">@param</span> data form data</span>
<span class="pl-c">* <span class="pl-k">@param</span> prefix form element name suffix</span>
<span class="pl-c">* <span class="pl-k">@return</span> form</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">loadForm</span>(selector, data, prefix);

<span class="pl-c">/**</span>
<span class="pl-c">* Common form submit</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> formSelector </span>
<span class="pl-c">* <span class="pl-k">@param</span> params  Optional; additional submission form parameter form</span>
<span class="pl-c">* <span class="pl-k">@param</span> noValidate Optional; Verify; boolean; default is true</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">submitForm</span>(formSelector, params, noValidate);

<span class="pl-c">/**</span>
<span class="pl-c">* Band with Ajax form validation form submission, internal encapsulates a `xRequestedWith = XMLHttpRequest` parameters;</span>
<span class="pl-c">* Will be submitted along with the form to the server, help developers to determine whether the server through Ajax request parameter `` xRequestedWith.</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> formSelector </span>
<span class="pl-c">* <span class="pl-k">@param</span> callback </span>
<span class="pl-c">* <span class="pl-k">@param</span> params Optional; additional submission form parameter form</span>
<span class="pl-c">* <span class="pl-k">@param</span> noValidate Optional; Verify; boolean; default is true</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">submitAjax</span>(formSelector, callback, params, noValidate);

<span class="pl-c">/**</span>
<span class="pl-c">* Band with Ajax form validation form submission, internal encapsulates a `xRequestedWith = XMLHttpRequest` parameters;</span>
<span class="pl-c">* Will be submitted along with the form to the server, help developers to determine whether the server through Ajax request parameter `` xRequestedWith.</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> formSelector </span>
<span class="pl-c">* <span class="pl-k">@param</span> url </span>
<span class="pl-c">* <span class="pl-k">@param</span> callback </span>
<span class="pl-c">* <span class="pl-k">@param</span> params Optional; additional submission form parameter form</span>
<span class="pl-c">* <span class="pl-k">@param</span> noValidate Optional; Verify; boolean; default is true</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">submitURLAjax</span>(formSelector, url, callback, params, noValidate) 

<span class="pl-c">/**</span>
<span class="pl-c">* Will form form information formatted as JSON return</span>
<span class="pl-c">* </span>
<span class="pl-c">* @parama formSelector </span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">serializeJSON</span>(formSelector);</pre>
  </div> </li> 
</ul> 

</div>

<div id="tabs" class="content_hide">
<ul> 
 <li><p>Two ways to call</p></li> 
 <li> <p>The difference between the two dynamic EasyUI Tabs dynamic loading between:</p> 
  <ul> 
   <li>Use content (iframe frame) into the page: 
    <ul> 
     <li><code>Content: '&lt;iframe scrolling =&quot; auto &quot;frameborder =&quot; 0 &quot;src =&quot;' + url + '&quot;style =&quot; width: 100%; height: 100%; &quot;&gt; &lt;/ iframe&gt;';</code></li> 
     <li>Exist as a separate window, the page content independent, non-interfering with the current page</li> 
     <li>The need to introduce independent JS and CSS resources needed</li> 
     <li>Pop-up content is within the window</li> 
     <li>Use href methods:</li> 
    </ul> </li> 
   <li> <code>Href: url,</code> 
    <ul> 
     <li>Content loaded clip, the content and the introduction of combined current page</li> 
     <li>Need to introduce JS and CSS resource page has introduced</li> 
     <li>A reference to the page can not have a body, otherwise the loaded content inside of JS file execution grammar</li> 
     <li>Html rendering prompt resolution displays</li> 
    </ul> </li> 
   <li> <p>Context menu HTML snippet:</p> 
    <div class="highlight highlight-text-html-basic">
     <pre>&lt;%-- ##################Tab Tab context menu can not be deleted################## --%&gt;
&lt;<span class="pl-ent">div</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>tabsMenu<span class="pl-pds">&quot;</span></span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyui-menu<span class="pl-pds">&quot;</span></span> <span class="pl-e">style</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>width:120px;<span class="pl-pds">&quot;</span></span>&gt;
       &lt;<span class="pl-ent">div</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>close<span class="pl-pds">&quot;</span></span>   <span class="pl-e">data-options</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>iconCls:'icon-close'<span class="pl-pds">&quot;</span></span>&gt;close&lt;/<span class="pl-ent">div</span>&gt;  
       &lt;<span class="pl-ent">div</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>other<span class="pl-pds">&quot;</span></span>   <span class="pl-e">data-options</span>=<span class="pl-s"><span class="pl-pds">&quot;</span><span class="pl-pds">&quot;</span></span>&gt;close others&lt;/<span class="pl-ent">div</span>&gt;  
       &lt;<span class="pl-ent">div</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>all<span class="pl-pds">&quot;</span></span>  <span class="pl-e">data-options</span>=<span class="pl-s"><span class="pl-pds">&quot;</span><span class="pl-pds">&quot;</span></span>&gt;close all&lt;/<span class="pl-ent">div</span>&gt;
       &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>menu-sep<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;
       &lt;<span class="pl-ent">div</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>closeRight<span class="pl-pds">&quot;</span></span>&gt;close right&lt;/<span class="pl-ent">div</span>&gt;
       &lt;<span class="pl-ent">div</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>closeLeft<span class="pl-pds">&quot;</span></span>&gt;close left&lt;/<span class="pl-ent">div</span>&gt;
       &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>menu-sep<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;
      &lt;<span class="pl-ent">div</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>refresh<span class="pl-pds">&quot;</span></span>  <span class="pl-e">data-options</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>iconCls:'icon-reload'<span class="pl-pds">&quot;</span></span>&gt;refresh&lt;/<span class="pl-ent">div</span>&gt; 
&lt;/<span class="pl-ent">div</span>&gt;</pre>
    </div> </li> 
   <li> <p>API</p> 
    <div class="highlight highlight-source-js">
     <pre><span class="pl-c">/**</span>
<span class="pl-c"> * Add a tab for a specified Tab, supports double-click to close</span>
<span class="pl-c"> * </span>
<span class="pl-c"> * @parma tabSelector </span>
<span class="pl-c"> * @parma title</span>
<span class="pl-c"> * @parma url </span>
<span class="pl-c"> * @parma icon Optional; icon</span>
<span class="pl-c"> * @parma isIframe Optional; boolean value; whether to use iframe incorporated, true way to use iframe introduced href default mode</span>
<span class="pl-c"> * </span>
<span class="pl-c"> * </span>
<span class="pl-c"> */</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">openTab</span>(tabSelector, title, url, icon, isIframe);

<span class="pl-c">/**</span>
<span class="pl-c"> * Refresh the current tab selected Panel</span>
<span class="pl-c"> * </span>
<span class="pl-c"> * <span class="pl-k">@param</span> tabSelector </span>
<span class="pl-c"> */</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">reloadSelTab</span>(tabSelector);

<span class="pl-c">/**</span>
<span class="pl-c"> * Text automatically at specified according to the menu to open a menu Tab</span>
<span class="pl-c"> * </span>
<span class="pl-c"> * <span class="pl-k">@param</span> menuSelector</span>
<span class="pl-c"> *            </span>
<span class="pl-c"> * <span class="pl-k">@param</span> tabSeelctor</span>
<span class="pl-c"> *            </span>
<span class="pl-c"> * <span class="pl-k">@param</span> menuText</span>
<span class="pl-c"> *            To open the menu text, you can use an array to define a plurality of menu text</span>
<span class="pl-c"> */</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">openMenuByText</span>(menuSelector, tabSeelctor, menuText);

<span class="pl-c">/**</span>
<span class="pl-c"> * Id according to the menu automatically at specified Tab to open a menu</span>
<span class="pl-c"> * </span>
<span class="pl-c"> * <span class="pl-k">@param</span> menuSelector</span>
<span class="pl-c"> *            </span>
<span class="pl-c"> * <span class="pl-k">@param</span> tabSeelctor</span>
<span class="pl-c"> *            </span>
<span class="pl-c"> * <span class="pl-k">@param</span> menuId</span>
<span class="pl-c"> *            To open the menu id, you can use an array to define multiple menu id</span>
<span class="pl-c"> */</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">openMenuById</span>(menuSelector, tabSelctor, menuId);

<span class="pl-c">/**</span>
<span class="pl-c"> * Binding tabs of the right-click menu, to achieve: close, close other, close all; Close the left tab close tabs to the right; refreshing the menu function</span>
<span class="pl-c"> * </span>
<span class="pl-c"> * <span class="pl-k">@param</span> tabSelector </span>
<span class="pl-c"> * <span class="pl-k">@param</span> menuSelector menu selector; Optional, the default of the #tabsMenu</span>
<span class="pl-c"> * </span>
<span class="pl-c"> * You must be defined in the page context menu label (menu id, name of the menu item can not be changed):</span>
<span class="pl-c">&lt;%-- ##################Tab Tab context menu can not be deleted################## --%&gt;</span>
<span class="pl-c">&lt;div id=&quot;tabsMenu&quot; class=&quot;easyui-menu&quot; style=&quot;width:120px;&quot;&gt;</span>
<span class="pl-c">       &lt;div name=&quot;close&quot;   data-options=&quot;iconCls:'icon-close'&quot;&gt;close&lt;/div&gt;  </span>
<span class="pl-c">       &lt;div name=&quot;other&quot;   data-options=&quot;&quot;&gt;close others&lt;/div&gt;  </span>
<span class="pl-c">       &lt;div name=&quot;all&quot;  data-options=&quot;&quot;&gt;close all&lt;/div&gt;</span>
<span class="pl-c">       &lt;div class=&quot;menu-sep&quot;&gt;&lt;/div&gt;</span>
<span class="pl-c">       &lt;div name=&quot;closeRight&quot;&gt;close right&lt;/div&gt;</span>
<span class="pl-c">       &lt;div name=&quot;closeLeft&quot;&gt;close left&lt;/div&gt;</span>
<span class="pl-c">       &lt;div class=&quot;menu-sep&quot;&gt;&lt;/div&gt;</span>
<span class="pl-c">      &lt;div name=&quot;refresh&quot;  data-options=&quot;iconCls:'icon-reload'&quot;&gt;refresh&lt;/div&gt; </span>
<span class="pl-c">&lt;/div&gt;</span>
<span class="pl-c">   */</span>
  <span class="pl-smi">uiEx</span>.<span class="pl-en">addTabsContextMenu</span>(tabSelector, menuSelector)</pre>
    </div> </li> 
  </ul> </li> 
</ul> 
</div>

<div id="datagrid" class="content_hide">
<ul> 
 <li><p>Two ways to call</p></li> 
 <li><p><strong>Package and extended</strong>: EasyUIEx related components for the use of datagrid depth CRUD application package, provides additional functionality, when you call the Initialization method, with the incoming <code>url</code>,<code>saveUrl</code>, <code>updateUrl</code>,<code>destroyUrl</code> address and other CRUD server operating parameters (and edatagrid the parameters remain the same), can be in a consistent manner by means of API EasyUIEx complete CRUD operations.</p></li> 
 <li><p><strong>Performance Optimization</strong>: the datagrid and edatagrid provides line editing condition monitoring, optimization request to modify. When line editing, column editing, does not submit a request unmodified content.</p></li> 
 <li> <p><strong>rowData returns the parameter</strong>: </p> <p>When adding or modifying data, you can return a <code>rowData</code> attribute in the<code>JSON</code> response, and EasyUIEx automatically refreshes the static data for the page that was added or edited based on the contents of <code>rowData</code>.</p> <p>For example, when adding data, if the current data primary key is submitted to the server side after the generation (such as the data key by the automatic growth generator control), add data, in the return of <code>JSON</code> set a <strong>rowData</strong> Property, which returns the most recent data that contains the <code>primary key id attribute</code> (other properties are optionally optional if no refresh is required) to automatically refresh the newly added front row. <strong>Otherwise, after the new data, delete the data, you have previously added data in the client does not have the primary key, there will be a failure to delete tips.</strong></p> 
  <div class="highlight highlight-source-json">
   <pre>{
    <span class="pl-s"><span class="pl-pds">&quot;</span>msg<span class="pl-pds">&quot;</span></span>:<span class="pl-s"><span class="pl-pds">&quot;</span>Save  Successed!<span class="pl-pds">&quot;</span></span>,
    <span class="pl-s"><span class="pl-pds">&quot;</span>locationUrl<span class="pl-pds">&quot;</span></span>:<span class="pl-s"><span class="pl-pds">&quot;</span><span class="pl-pds">&quot;</span></span>,
    <span class="pl-s"><span class="pl-pds">&quot;</span>callback<span class="pl-pds">&quot;</span></span>:<span class="pl-s"><span class="pl-pds">&quot;</span><span class="pl-pds">&quot;</span></span>,
    <span class="pl-s"><span class="pl-pds">&quot;</span>statusCode<span class="pl-pds">&quot;</span></span>:<span class="pl-c1">200</span>,
    <span class="pl-s"><span class="pl-pds">&quot;</span>rowData<span class="pl-pds">&quot;</span></span>:{<span class="pl-s"><span class="pl-pds">&quot;</span>deptno<span class="pl-pds">&quot;</span></span>:<span class="pl-c1">10</span>,<span class="pl-s"><span class="pl-pds">&quot;</span>dname<span class="pl-pds">&quot;</span></span>:<span class="pl-s"><span class="pl-pds">&quot;</span>x<span class="pl-pds">&quot;</span></span>,<span class="pl-s"><span class="pl-pds">&quot;</span>loc<span class="pl-pds">&quot;</span></span>:<span class="pl-s"><span class="pl-pds">&quot;</span>x<span class="pl-pds">&quot;</span></span>} <span class="pl-ii">//</span> <span class="pl-ii">Returns</span> <span class="pl-ii">the</span> <span class="pl-ii">auto</span> <span class="pl-ii">increment</span> <span class="pl-ii">primary</span> <span class="pl-ii">key</span> <span class="pl-ii">to</span> <span class="pl-ii">update</span> <span class="pl-ii">the</span> <span class="pl-ii">client</span> <span class="pl-ii">data</span>
}</pre>
  </div> </li> 
 <li> <p>datagrid、edatagrid、detaildatagrid、treegrid Extended Attributes common</p> 
  <table> 
   <thead> 
    <tr> 
     <th>Name</th> 
     <th>Type</th> 
     <th>Description</th> 
     <th>Default</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>url</td> 
     <td>string</td> 
     <td>Query url; get:<code>dg.datagrid(&quot;options&quot;).url</code> </td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>saveUrl</td> 
     <td>string</td> 
     <td>Save url；get：<code>dg.datagrid(&quot;options&quot;).saveUrl</code> </td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>updateUrl</td> 
     <td>string</td> 
     <td>Update url；get：<code>dg.datagrid(&quot;options&quot;).updateUrl</code> </td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>destroyUrl</td> 
     <td>string</td> 
     <td>Destory url；get：<code>dg.datagrid(&quot;options&quot;).destroyUrl</code> </td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>showHeaderContextMenu</td> 
     <td>boolean</td> 
     <td>Whether the meter display the context menu, choose to display a column</td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>showContextMenu</td> 
     <td>boolean</td> 
     <td>Whether to display the context menu, with menuSelector property use</td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>menuSelector</td> 
     <td>string</td> 
     <td>Menu Selector</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>successKey</td> 
     <td>string</td> 
     <td>Success mark key returned by the server, for example: &quot;statusCode&quot;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>successValue</td> 
     <td>string</td> 
     <td>The server returned successfully labeled value, for example: &quot;200&quot;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>mutipleDelete</td> 
     <td>boolean</td> 
     <td>Whether to open a multi-line submission delete</td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>mutipleDeleteProperty</td> 
     <td>string/Array</td> 
     <td>Multi-line reference to the property and the value of the server will not delete sendRowDataPrefix prefix added, supports the use of an array to specify multiple attribute names</td> 
     <td>&nbsp;</td> 
    </tr> 
   </tbody> 
  </table> </li> 
 <li> <p>datagrid、edatagrid Extended Attributes common</p> 
  <table> 
   <thead> 
    <tr> 
     <th>Name</th> 
     <th>Type</th> 
     <th>Description</th> 
     <th>Default</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>sendRowDataPrefix</td> 
     <td>boolean</td> 
     <td>Add, delete, update data, support setting submitting row data prefix <code>sendRowDataPrefix:&quot;. SysUser &quot;</code>, before the data parameter names such submission will increase the specified prefix, handy when using the Struts framework such as submitting data to sysUser object reception</td> 
     <td>&nbsp;</td> 
    </tr> 
   </tbody> 
  </table> </li> 
 <li> <p>datagrid</p> 
  <table> 
   <thead> 
    <tr> 
     <th>Name</th> 
     <th>Type</th> 
     <th>Description</th> 
     <th>Default</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>clickRowEdit</td> 
     <td>boolean</td> 
     <td>When you click to achieve line editing in DataGrid, you can replace edatagrid achieve with line editing datagrid</td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>clickCellEdit</td> 
     <td>boolean</td> 
     <td>Click column editing function is turned on</td> 
     <td>false</td> 
    </tr> 
   </tbody> 
  </table> </li> 
 <li> <p>edatagrid Extended Attributes <strong>Use <code>easy.jquery.edatagrid.js</code> instead of <code>jquery.edatagrid.js</code>, easyUIEx of edatagrid performance and logic optimization, and provide additional functionality</strong>。</p> 
  <table> 
   <thead> 
    <tr> 
     <th>Name</th> 
     <th>Type</th> 
     <th>Description</th> 
     <th>Default</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>clickEdit</td> 
     <td>boolean</td> 
     <td>Whether to open, click Edit (edatagrid default double-click to open editor)</td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>showMsg</td> 
     <td>boolean</td> 
     <td>Whether to add, modify alert message</td> 
     <td>false</td> 
    </tr> 
   </tbody> 
  </table> </li> 
 <li> <p>Demo</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">// datagrid  Initialization</span>
<span class="pl-k">var</span> dg <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#sysUserDataGrid<span class="pl-pds">&quot;</span></span>);
<span class="pl-smi">dg</span>.<span class="pl-en">initDatagrid</span>({
iconCls <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>icon-group<span class="pl-pds">'</span></span>,
<span class="pl-c">/*</span>
<span class="pl-c"> * DataGrid editing: saveUrl, updateUrl, destroyUrl with uiEx use</span>
<span class="pl-c"> */</span>
url <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>sysUser_list.action<span class="pl-pds">&quot;</span></span>,
saveUrl <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>sysUser_save.action<span class="pl-pds">&quot;</span></span>,
updateUrl <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>sysUser_update.action<span class="pl-pds">&quot;</span></span>,
destroyUrl <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>sysUser_delete.action<span class="pl-pds">&quot;</span></span>,
showHeaderContextMenu<span class="pl-k">:</span><span class="pl-c1">true</span>, <span class="pl-c">// Header add context menu, choose to display a column</span>
<span class="pl-c">// clickRowEdit:true, //Register Click-line editing, you can replace with line editing edatagrid implement CRUD</span>
pageSize <span class="pl-k">:</span> <span class="pl-c1">10</span>,
pageList <span class="pl-k">:</span> [ <span class="pl-c1">5</span>, <span class="pl-c1">10</span>, <span class="pl-c1">15</span>, <span class="pl-c1">20</span> ],
checkbox <span class="pl-k">:</span> <span class="pl-c1">true</span>,
singleSelect <span class="pl-k">:</span> <span class="pl-c1">false</span>,
checkOnSelect <span class="pl-k">:</span> <span class="pl-c1">true</span>,
<span class="pl-c">// Double-click operation</span>
<span class="pl-en">onDblClickRow</span> <span class="pl-k">:</span> <span class="pl-k">function</span>(<span class="pl-smi">rowIndex</span>, <span class="pl-smi">rowData</span>) {
    <span class="pl-en">toEdit</span>(rowData);
},
menuSelector<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">&quot;</span>#sysUserContextMenu<span class="pl-pds">&quot;</span></span>,
showContextMenu<span class="pl-k">:</span><span class="pl-c1">true</span>,
sendRowDataPrefix<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">&quot;</span>sysUser.<span class="pl-pds">&quot;</span></span>,
mutipleDelete<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Submit delete multiple rows</span>
mutipleDeleteProperty<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">&quot;</span>userId<span class="pl-pds">&quot;</span></span> <span class="pl-c">// Multi-line reference to the property and the value of the server will not delete sendRowDataPrefix prefix added, supports the use of an array to specify multiple attribute names</span>
});</pre>
  </div> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">// edatagrid  Initialization</span>
<span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#deptDataGrid<span class="pl-pds">&quot;</span></span>).<span class="pl-en">initEdatagrid</span>({
   <span class="pl-c">/*</span>
<span class="pl-c">    * DataGrid editing: saveUrl, updateUrl, destroyUrl with uiEx use</span>
<span class="pl-c">    */</span>
   url <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>dept_list.action<span class="pl-pds">&quot;</span></span>,
   saveUrl <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>dept_save.action<span class="pl-pds">&quot;</span></span>,
   updateUrl <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>dept_update.action<span class="pl-pds">&quot;</span></span>,
   destroyUrl <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>dept_delete.action<span class="pl-pds">&quot;</span></span>,
   idField <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>deptno<span class="pl-pds">&quot;</span></span>,
   showHeaderContextMenu <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Header add context menu, choose to display a column</span>
   pagination <span class="pl-k">:</span> <span class="pl-c1">true</span>,
   checkbox <span class="pl-k">:</span> <span class="pl-c1">true</span>,
   checkOnSelect <span class="pl-k">:</span> <span class="pl-c1">true</span>,
   singleSelect <span class="pl-k">:</span> <span class="pl-c1">false</span>,
   autoSave <span class="pl-k">:</span> <span class="pl-c1">true</span>,
   <span class="pl-c">//queryParam:{&quot;rows&quot;:dg.datagrid(&quot;options&quot;).pageSize},</span>
   clickEdit <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Click Edit</span>
   showMsg <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Show operation msg</span>
   <span class="pl-c">//右键菜单</span>
   menuSelector <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>#deptContextMenu<span class="pl-pds">&quot;</span></span>,
   showContextMenu <span class="pl-k">:</span> <span class="pl-c1">true</span>,
   sendRowDataPrefix <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>dept.<span class="pl-pds">&quot;</span></span>, <span class="pl-c">//submit data suffix</span>
   successKey <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>statusCode<span class="pl-pds">&quot;</span></span>, <span class="pl-c">//Success marks the return key on the server side</span>
   successValue <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>200<span class="pl-pds">&quot;</span></span> <span class="pl-c">//Success marks the return value on the server side</span>
});</pre>
  </div> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">// detaildatagrid  Initialization</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initDetailDatagrid</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#userDataGrid2<span class="pl-pds">&quot;</span></span>,<span class="pl-s"><span class="pl-pds">&quot;</span>do/toDetailEdit.jsp<span class="pl-pds">&quot;</span></span>,{
<span class="pl-c">/*</span>
<span class="pl-c">* DataGrid editing: saveUrl, updateUrl, destroyUrl with uiEx use</span>
<span class="pl-c">*/</span>
url <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>do/doList.jsp<span class="pl-pds">&quot;</span></span>, <span class="pl-c">//Datagrid query</span>
saveUrl <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>do/doMyUsers.jsp?t=add<span class="pl-pds">&quot;</span></span>, <span class="pl-c">//Save</span>
updateUrl <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>do/doMyUsers.jsp?t=edit&amp;id={id}<span class="pl-pds">&quot;</span></span>, <span class="pl-c">//Update</span>
destroyUrl <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>do/doMyUsers.jsp?t=delete<span class="pl-pds">&quot;</span></span>, <span class="pl-c">//Delete</span>
iconCls <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>icon-group<span class="pl-pds">&quot;</span></span>,
showHeaderContextMenu <span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">// Header add context menu, choose to display a column</span>
pageSize <span class="pl-k">:</span> <span class="pl-c1">5</span>,
pageList <span class="pl-k">:</span> [ <span class="pl-c1">5</span>, <span class="pl-c1">10</span>, <span class="pl-c1">15</span>, <span class="pl-c1">20</span> ]
});</pre>
  </div> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">// treegrid  Initialization</span>
<span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#sysMenuPermissionDataGrid<span class="pl-pds">&quot;</span></span>).<span class="pl-en">initTreegrid</span>({
url <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>sysMenuPermission_list.action<span class="pl-pds">'</span></span>,
rownumbers <span class="pl-k">:</span> <span class="pl-c1">true</span>,
idField <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>id<span class="pl-pds">&quot;</span></span>,
treeField <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>text<span class="pl-pds">'</span></span>,
lines <span class="pl-k">:</span> <span class="pl-c1">true</span>,
<span class="pl-c">// Double-click operation</span>
<span class="pl-en">onDblClickRow</span> <span class="pl-k">:</span> <span class="pl-k">function</span>(<span class="pl-smi">rowData</span>) {
    <span class="pl-en">toEdit</span>(rowData);
},
<span class="pl-c">// Header add context menu, choose to display a column</span>
showHeaderContextMenu <span class="pl-k">:</span> <span class="pl-c1">true</span>,
menuSelector <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>#sysMenuPermissionContextMenu<span class="pl-pds">&quot;</span></span>,
showContextMenu <span class="pl-k">:</span> <span class="pl-c1">true</span>
});</pre>
  </div> </li> 
 <li> <p>API</p> 
  <ul> 
   <li> <p>grid Initialization API</p> 
    <div class="highlight highlight-source-js">
     <pre><span class="pl-c">/**</span>
<span class="pl-c">* DataGrid: datagrid Initialization, It contains the default parameters uiEx.dataGridDefaults</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector </span>
<span class="pl-c">* <span class="pl-k">@param</span> params Optional; datagrid Initialization parameters</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initDatagrid</span>(datagridSelector, params);

<span class="pl-c">/**</span>
<span class="pl-c">* EditDataGrid: edatagrid Initialization, It contains the default parameters uiEx.dataGridDefaults</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector </span>
<span class="pl-c">* <span class="pl-k">@param</span> params Optional; datagrid Initialization parameters</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initEdatagrid</span>(datagridSelector, params);

<span class="pl-c">/**</span>
<span class="pl-c">* DetailDataGrid: DetailDataGrid Initialization, It contains the default parameters uiEx.detailDataGridDefaults</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector </span>
<span class="pl-c">* <span class="pl-k">@param</span> detailUrl Load detailed view url</span>
<span class="pl-c">* <span class="pl-k">@param</span> params Optional; other parameters, including data CRUD the url address</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initDetailDatagrid</span>(datagridSelector, detailUrl, params);

<span class="pl-c">/**</span>
<span class="pl-c">* Treegird: Treegird Initialization</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treegridSelector</span>
<span class="pl-c">*           </span>
<span class="pl-c">* <span class="pl-k">@param</span> params</span>
<span class="pl-c">*            Optional; treegrid other parameters</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initTreegrid</span>(treegridSelector, params); </pre>
    </div> </li> 
   <li> <p>datagrid CRUD API</p> 
    <div class="highlight highlight-source-js">
     <pre><span class="pl-c">/*</span>
<span class="pl-c">* ############## DataGrid CRUD</span>
<span class="pl-c">*/</span>
<span class="pl-c">/**</span>
<span class="pl-c">*  datagrid: To add a new row to row to edit DataGrid</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector </span>
<span class="pl-c">* <span class="pl-k">@param</span> rowParam Optional; data parameters of the new data row</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">rowAdd</span>(datagridSelector, rowParam);

<span class="pl-c">/**</span>
<span class="pl-c">* datagrid: DataGrid for the specified line editing is enabled, it will cause a new load</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector  </span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">rowEdit</span>(datagridSelector);

<span class="pl-c">/**</span>
<span class="pl-c">* Cancel edit the selected row</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector</span>
<span class="pl-c">*           </span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">rowCancelEdit</span>(datagridSelector)；

<span class="pl-c">/**</span>
<span class="pl-c">* datagird, edatagrid, detaildatagrid, treegrid: delete the selected row, supports multi-row delete parameters mutipleDelete</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector</span>
<span class="pl-c">*            </span>
<span class="pl-c">* <span class="pl-k">@param</span> showMsg</span>
<span class="pl-c">*            Optional; boolean value, whether a message is displayed, it will override the default parameter values global uiEx.showRowDeleteMsg</span>
<span class="pl-c">* <span class="pl-k">@param</span> reloadDataGrid</span>
<span class="pl-c">*           Optional; if reload reload DataGrid, default is false</span>
<span class="pl-c">* <span class="pl-k">@param</span> successKey</span>
<span class="pl-c">*            可Selected; the string value, perform a successful return to the mark key, value must be the same as before representatives successValue deleted successfully</span>
<span class="pl-c">* <span class="pl-k">@param</span> successValue</span>
<span class="pl-c">*            Optional; String value, execution marks the successful return value</span>
<span class="pl-c">* <span class="pl-k">@param</span> callback</span>
<span class="pl-c">*            Optional; After the successful implementation of the callback function, the server-side parameters for the return of data</span>
<span class="pl-c">*  </span>
<span class="pl-c">*  - demo：</span>
<span class="pl-c">*  dg.rowDelete(true, false, &quot;statusCode&quot;, &quot;200&quot;);</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">rowDelete</span>(datagridSelector,  showMsg, reloadDataGrid, successKey, successValue)；</pre>
    </div> </li> 
   <li> <p>DetailDataGrid API</p> 
    <div class="highlight highlight-source-js">
     <pre><span class="pl-c">/**</span>
<span class="pl-c">* DetailDataGrid: DetailDataGrid add the line</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector </span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">detailRowAdd</span>(datagridSelector);

<span class="pl-c">/**</span>
<span class="pl-c">* DetailDataGrid: DetailDataGrid edit save</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector</span>
<span class="pl-c">* <span class="pl-k">@param</span> index Edit line index, when loading detailed data, index value will be submitted to the server directly from the server to get the request parameters passed to the function</span>
<span class="pl-c">*            For example, JSP : uiEx.detailRowSave('#userDataGrid',${param.index})</span>
<span class="pl-c">* <span class="pl-k">@param</span> showMsg Optional; whether to display a message</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">detailRowSave</span>(datagridSelector, index, showMsg);

<span class="pl-c">/**</span>
<span class="pl-c">* DetailDataGrid: DetailDataGrid cancel edit or add</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector</span>
<span class="pl-c">* <span class="pl-k">@param</span> index Edit line index, when loading detailed data, index value will be submitted to the server directly from the server to get the request parameters passed to the function</span>
<span class="pl-c">*            For example, JSP : uiEx.detailRowCancel('#userDataGrid',${param.index})</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">detailRowCancel</span>(datagridSelector, index);</pre>
    </div> </li> 
   <li> <p>Edatagrid API</p> 
    <div class="highlight highlight-source-js">
     <pre><span class="pl-c">/**</span>
<span class="pl-c">* edatagrid, start editing, direct Click Edit, do not need to double-click to open the Edit</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector</span>
<span class="pl-c">*            </span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">beginEditGrid</span>(datagridSelector);

<span class="pl-c">/**</span>
<span class="pl-c">* edatagrid, finish editing into editable Unlike disableEditing editing disabled, you can not edit editing disabled</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> datagridSelector</span>
<span class="pl-c">*            </span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">endEditGrid</span>(datagridSelector);</pre>
    </div> </li> 
  </ul> </li> 
</ul> 
</div>

<div id="treegrid" class="content_hide">
<ul> 
 <li><p>Two ways to call</p></li> 
 <li> <p>Supports tree rendering using the <code>parentId</code> attribute</p> 
  <blockquote> 
   <p>EasyUI The default tree constructs use the <code>children array</code>. EasyUIEx allows the <code>parentId attribute</code> to be used to represent and render tree components.</p> 
  </blockquote> </li> 
 <li> <p>Extended Attributes</p> 
  <table> 
   <thead> 
    <tr> 
     <th>Name</th> 
     <th>Type</th> 
     <th>Description</th> 
     <th>Default</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>showHeaderContextMenu</td> 
     <td>boolean</td> 
     <td>Whether the meter display the context menu, choose to display a column</td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>showContextMenu</td> 
     <td>boolean</td> 
     <td>Whether to display the context menu, with menuSelector property use</td> 
     <td>false</td> 
    </tr> 
    <tr> 
     <td>menuSelector</td> 
     <td>string</td> 
     <td>Menu Selector</td> 
     <td>&nbsp;</td> 
    </tr> 
   </tbody> 
  </table> </li> 
 <li> <p>Demo</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#sysMenuPermissionDataGrid<span class="pl-pds">&quot;</span></span>).<span class="pl-en">initTreegrid</span>({
url <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>sysMenuPermission_list.action<span class="pl-pds">'</span></span>,
rownumbers <span class="pl-k">:</span> <span class="pl-c1">true</span>,
idField <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>id<span class="pl-pds">&quot;</span></span>,
treeField <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>text<span class="pl-pds">'</span></span>,
lines <span class="pl-k">:</span> <span class="pl-c1">true</span>,
<span class="pl-c">// Double-click operation</span>
<span class="pl-en">onDblClickRow</span> <span class="pl-k">:</span> <span class="pl-k">function</span>(<span class="pl-smi">rowData</span>) {
    <span class="pl-en">toEdit</span>(rowData);
},
<span class="pl-c">// Header add context menu, choose to display a column</span>
showHeaderContextMenu <span class="pl-k">:</span> <span class="pl-c1">true</span>,
menuSelector <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>#sysMenuPermissionContextMenu<span class="pl-pds">&quot;</span></span>,
showContextMenu <span class="pl-k">:</span> <span class="pl-c1">true</span>
});</pre>
  </div> 
  <div class="highlight highlight-text-html-basic">
   <pre><span class="pl-c">&lt;!-- Collapse and expand the current directory --&gt;</span>
&lt;<span class="pl-ent">div</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>sysMenuRightContextMenu<span class="pl-pds">&quot;</span></span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyui-menu<span class="pl-pds">&quot;</span></span> <span class="pl-e">style</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>width:120px;<span class="pl-pds">&quot;</span></span>&gt;
&lt;<span class="pl-ent">div</span> <span class="pl-e">onclick</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>uiEx.collapse('#sysMenuRightDataGrid')<span class="pl-pds">&quot;</span></span>&gt;Collapse&lt;/<span class="pl-ent">div</span>&gt;
&lt;<span class="pl-ent">div</span> <span class="pl-e">onclick</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>uiEx.expand('#sysMenuRightDataGrid')<span class="pl-pds">&quot;</span></span>&gt;Expand&lt;/<span class="pl-ent">div</span>&gt;
&lt;/<span class="pl-ent">div</span>&gt;</pre>
  </div> </li> 
 <li> <p>API</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/**</span>
<span class="pl-c">* Treegird: Treegird Initialization</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treegridSelector</span>
<span class="pl-c">*            </span>
<span class="pl-c">* <span class="pl-k">@param</span> params</span>
<span class="pl-c">*            Optional; treegrid other parameters</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initTreegrid</span>(treegridSelector, params)

<span class="pl-c">/**</span>
<span class="pl-c">* Treegird: Use parentId attribute rendering Treegird Initialization</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treegridSelector</span>
<span class="pl-c">*            </span>
<span class="pl-c">* <span class="pl-k">@param</span> params</span>
<span class="pl-c">*            Optional; treegrid other parameters</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initParentIdTreegrid</span>(treegridSelector, params)

<span class="pl-c">/**</span>
<span class="pl-c">* Collapse the select folder</span>
<span class="pl-c">* <span class="pl-k">@param</span> treeGridSelector  </span>
<span class="pl-c">* </span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-c1">collapse</span>(treeGridSelector);

<span class="pl-c">/**</span>
<span class="pl-c">* Expand the select folder</span>
<span class="pl-c">* <span class="pl-k">@param</span> treeGridSelector  </span>
<span class="pl-c">* </span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-c1">expand</span>(treeGridSelector);</pre>
  </div> </li> 
</ul> 
</div>

<div id="tree" class="content_hide">
<ul> 
 <li><p>Two ways to call</p></li> 
 <li><p>Supports tree rendering using the <code>parentId</code> attribute</p></li> 
 <li><p>Support Tabs binding</p></li> 
 <li> <p>Extended Attributes</p> 
  <table> 
   <thead> 
    <tr> 
     <th>Name</th> 
     <th>Type</th> 
     <th>Description</th> 
     <th>Default</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>expandChilds</td> 
     <td>boolean</td> 
     <td>Click to expand menu parent child node function</td> 
     <td>false</td> 
    </tr> 
   </tbody> 
  </table> </li> 
 <li> <p>Demo</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">//Common tree menu Initialization</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initTree</span>(
<span class="pl-s"><span class="pl-pds">&quot;</span>#menu<span class="pl-pds">&quot;</span></span>,  <span class="pl-c">//Tree menu selector</span>
<span class="pl-s"><span class="pl-pds">&quot;</span>#tabs<span class="pl-pds">&quot;</span></span>,  <span class="pl-c">//Open the menu tree url of tabSelector</span>
   <span class="pl-c">//Other tree parameters</span>
{
    expandChilds<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">//Click the parent menu, expand the submenu</span>
    data<span class="pl-k">:</span> <span class="pl-smi">EasySSH</span>.<span class="pl-smi">menuTreeJson</span>
   <span class="pl-c">//url : &quot;json/menuTree.json.js&quot;, </span>
}
);</pre>
  </div> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">//Text automatically opens the specified menu</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">openMenuByText</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#menu<span class="pl-pds">&quot;</span></span>,<span class="pl-s"><span class="pl-pds">&quot;</span>#tabs<span class="pl-pds">&quot;</span></span>,<span class="pl-s"><span class="pl-pds">&quot;</span>CRUD<span class="pl-pds">&quot;</span></span>);</pre>
  </div> </li> 
 <li> <p>API</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/*</span>
<span class="pl-c">* ############## Tree </span>
<span class="pl-c">*/</span>
<span class="pl-c">/**</span>
<span class="pl-c">* Tree: tree Initialization, contains two default functionality:</span>
<span class="pl-c">* 1. Click on the menu to open the parent node child node function</span>
<span class="pl-c">* 2. Click on the menu open in tabSelector specified tab</span>
<span class="pl-c">* 3. tab, double-click to close</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treeSelector</span>
<span class="pl-c">* <span class="pl-k">@param</span> tabSelector  Open the menu tree url of tab selector</span>
<span class="pl-c">* <span class="pl-k">@param</span> params Optional; tree Initialization parameters</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initTree</span>(treeSelector, tabSelector, params);

  <span class="pl-c">/**</span>
<span class="pl-c">* Tree: Use parentId attribute rendering tree Initialization, contains two default functionality:</span>
<span class="pl-c">* 1. Click on the menu to open the parent node child node function</span>
<span class="pl-c">* 2. Click on the menu open in tabSelector specified tab</span>
<span class="pl-c">* 3. tab, double-click to close</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treeSelector</span>
<span class="pl-c">* <span class="pl-k">@param</span> tabSelector  Open the menu tree url of tab selector</span>
<span class="pl-c">* <span class="pl-k">@param</span> params Optional; tree Initialization parameters</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initParentIdTree</span>(treeSelector, tabSelector, params);

<span class="pl-c">/**</span>
<span class="pl-c">* onSelect event processing: achieving Tree of onSelect event, to achieve click menu to open the parent node when the child node function tree Initialization incoming event by registering onSelect</span>
<span class="pl-c">* onSelect : uiEx.expandChilds, //Click to open the sub-menu parent node functionality</span>
<span class="pl-c">* </span>
<span class="pl-c">* By initTree of expandChilds property can achieve the same effect:</span>
<span class="pl-c">* expandChilds: true; </span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> node</span>
<span class="pl-c">*            Click on the node object passed when the event call</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">expandChilds</span>(node);</pre>
  </div> </li> 
 <li> <p>Binding tabs associated API</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/*</span>
<span class="pl-c">* ############## Tree Menu open to tab</span>
<span class="pl-c">*/</span>
<span class="pl-c">/**</span>
<span class="pl-c">* Text automatically at specified according to the menu to open a menu Tab</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> menuSelector menu selector</span>
<span class="pl-c">* <span class="pl-k">@param</span> tabSeelctor tab selector</span>
<span class="pl-c">* <span class="pl-k">@param</span> menuText  To open the menu text, you can use an array to define a plurality of menu text</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">openMenuByText</span>(menuSelector, tabSelector, menuText);

<span class="pl-c">/**</span>
<span class="pl-c">* Id according to the menu automatically at specified Tab to open a menu</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> menuSelector menu selector</span>
<span class="pl-c">* <span class="pl-k">@param</span> tabSeelctor tab selector</span>
<span class="pl-c">* <span class="pl-k">@param</span> menuId To open the menu id, you can use an array to define multiple menu id</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">openMenuById</span>(menuSelector, tabSelctor, menuId);</pre>
  </div> </li> 
</ul> 
</div>


<div id="checkboxtree" class="content_hide">
<ul> 
 <li><p>Two ways to call</p></li> 
 <li><p>Supports tree rendering using the <code>parentId</code> attribute</p></li> 
 <li> <p>Extended Attributes</p> 
  <table> 
   <thead> 
    <tr> 
     <th>Name</th> 
     <th>Type</th> 
     <th>Description</th> 
     <th>Default</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>showTitle</td> 
     <td>string</td> 
     <td>Mouse serving individual title prompts, you can specify the attributes displayed</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>noChildCascadeCheck</td> 
     <td>boolean</td> 
     <td>Cascade Select parent, but the parent does not cascade selected select child nodes. And cascadeCheck: true will cause the parent node is selected automatically select all child nodes.</td> 
     <td>false</td> 
    </tr> 
   </tbody> 
  </table> </li> 
 <li> <p>Demo</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/*</span>
<span class="pl-c">* Checkbox tree Initialization</span>
<span class="pl-c">*/</span>
<span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#rightsTree<span class="pl-pds">&quot;</span></span>).<span class="pl-en">initTreeChk</span>(
      <span class="pl-c">//Loading parameters tree</span>
      {
          url<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">&quot;</span>do/menuJson.jsp<span class="pl-pds">&quot;</span></span>  <span class="pl-c">//Get Tree JSON data</span>
      },
      [<span class="pl-c1">11</span>] <span class="pl-c">//The default value of the array is selected</span>
);</pre>
  </div> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/*</span>
<span class="pl-c">*  Initialization Rights check box</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initTreeChk</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#sysRoleEditRights<span class="pl-pds">&quot;</span></span>, {
  url <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>sysMenuRight_listAll.action<span class="pl-pds">&quot;</span></span>,
  checkbox<span class="pl-k">:</span><span class="pl-c1">true</span>,
  animate<span class="pl-k">:</span><span class="pl-c1">true</span>,
  lines<span class="pl-k">:</span><span class="pl-c1">true</span>,
  noChildCascadeCheck<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">//Cascade Select parent, but the parent does not cascade selected select child nodes</span>
  showTitle<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">&quot;</span>remark<span class="pl-pds">&quot;</span></span> <span class="pl-c">//The remark attribute as a title display</span>
}, <span class="pl-smi">data</span>.<span class="pl-smi">list</span>);</pre>
  </div> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/*</span>
<span class="pl-c">* Reset</span>
<span class="pl-c">*/</span>
<span class="pl-smi">rights</span>.<span class="pl-en">resetTree</span><span class="pl-k">=</span><span class="pl-k">function</span>(){
  <span class="pl-smi">uiEx</span>.<span class="pl-en">treeChkRest</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#rightsTree<span class="pl-pds">&quot;</span></span>);
}</pre>
  </div> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/*</span>
<span class="pl-c">* Submit</span>
<span class="pl-c">*/</span>
<span class="pl-smi">rights</span>.<span class="pl-en">submit</span><span class="pl-k">=</span><span class="pl-k">function</span>(){
  <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#rightsForm<span class="pl-pds">&quot;</span></span>).<span class="pl-en">submitAjax</span>(<span class="pl-k">function</span>(<span class="pl-smi">data</span>){
          <span class="pl-en">console</span>.<span class="pl-c1">info</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>Submitted successfully<span class="pl-pds">&quot;</span></span>);
      },
      <span class="pl-c">//With rightsForm form is submitted to the server with the selected parameters --Checkbox tree node id list (# separated)</span>
      {
          ids<span class="pl-k">:</span><span class="pl-smi">uiEx</span>.<span class="pl-en">getCheckedIds</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#rightsTree<span class="pl-pds">&quot;</span></span>).<span class="pl-c1">join</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#<span class="pl-pds">&quot;</span></span>)
      }
  );
}</pre>
  </div> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/*</span>
<span class="pl-c">* Property values specified node attributeArray get Checkbox tree selected, returns an array of values to obtain a list of</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">getCheckedInfos</span>(<span class="pl-s"><span class="pl-pds">&quot;</span>#sysRoleAddRights<span class="pl-pds">&quot;</span></span>,[<span class="pl-s"><span class="pl-pds">&quot;</span>id<span class="pl-pds">&quot;</span></span>,<span class="pl-s"><span class="pl-pds">&quot;</span>type<span class="pl-pds">&quot;</span></span>])</pre>
  </div> </li> 
 <li> <p>API</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-c">/*</span>
<span class="pl-c">* ############## Checkbox Tree</span>
<span class="pl-c">*/</span>
<span class="pl-c">/**</span>
<span class="pl-c">* Checkbox tree Initialization</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treeSelector tree selector or dom</span>
<span class="pl-c">* <span class="pl-k">@param</span> param tree loading parameters </span>
<span class="pl-c">* <span class="pl-k">@param</span> values The default value of the array is selected</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initTreeChk</span>(treeSelector, param, values);

<span class="pl-c">/**</span>
<span class="pl-c">* Use parentId attribute renderingCheckbox tree Initialization</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treeSelector tree selector or dom</span>
<span class="pl-c">* <span class="pl-k">@param</span> param tree loading parameters </span>
<span class="pl-c">* <span class="pl-k">@param</span> values The default value of the array is selected</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">initParentIdTreeChk</span>(treeSelector, param, values);

<span class="pl-c">/**</span>
<span class="pl-c">* Tree with check boxes reset, with uiEx.treeChk use</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treeSelector tree selector or dom</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">treeChkRest</span>(treeSelector);

<span class="pl-c">/**</span>
<span class="pl-c">* Set the selected tree box, Note: This method must be rendered in the tree after the call</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treeSelector tree selector or dom</span>
<span class="pl-c">* <span class="pl-k">@param</span> values The selected tree node ID array</span>
<span class="pl-c">*/</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">treeChkSetValues</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">treeSelector</span>, <span class="pl-smi">values</span>); 

<span class="pl-c">/**</span>
<span class="pl-c">* Id get an array of nodes with Checkbox tree selected</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treeSelector  tree selector or dom</span>
<span class="pl-c">* <span class="pl-k">@return</span> Id array with Checkbox tree node selected</span>
<span class="pl-c">*/</span>
uiEx.getCheckedIds(treeSelector);

<span class="pl-c">/**</span>
<span class="pl-c">* Property values specified node attributeArray get Checkbox tree selected, returns an array of values to obtain a list of</span>
<span class="pl-c">* </span>
<span class="pl-c">* <span class="pl-k">@param</span> treeSelector tree selector or dom</span>
<span class="pl-c">* <span class="pl-k">@param</span> propertyArray Array tree property</span>
<span class="pl-c">* <span class="pl-k">@return</span> Get an array of value list</span>
<span class="pl-c">*/</span>
uiEx.getCheckedInfos(treeSelector, propertyArray);</pre>
  </div> </li> 
</ul> 

</div>

<div id="validate" class="content_hide">

<ul> 
 <li><p>Because authentication scenario and rules vary, according to the need to expand <code>easy.easyuiex-validate.js</code>, register the custom validator.</p></li> 
 <li> <p>Demo：</p> 
  <div class="highlight highlight-text-html-basic">
   <pre>&lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>renewpwd<span class="pl-pds">&quot;</span></span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>renewpwd<span class="pl-pds">&quot;</span></span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>easyui-textbox<span class="pl-pds">&quot;</span></span> 
type=<span class="pl-s"><span class="pl-pds">&quot;</span>password<span class="pl-pds">&quot;</span></span>  
data<span class="pl-e">-options</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>required:true,validType:['minLength [6]','equals[\'#newpwd\',\'Is inconsistent with the new password.\']']<span class="pl-pds">&quot;</span></span>&gt; &lt;/<span class="pl-ent">input</span>&gt;</pre>
  </div> </li> 
 <li> <p>API</p> 
  <div class="highlight highlight-source-js">
   <pre><span class="pl-en">$</span>(<span class="pl-k">function</span>() {
  <span class="pl-c">/*</span>
<span class="pl-c">   * ################# Custom Validator</span>
<span class="pl-c">   */</span>

  <span class="pl-c">/**</span>
<span class="pl-c">   * Comparing equals whit other input</span>
<span class="pl-c">   */</span>
  <span class="pl-smi">$</span>.<span class="pl-en">extend</span>(<span class="pl-smi">$</span>.<span class="pl-smi">fn</span>.<span class="pl-smi">validatebox</span>.<span class="pl-smi">defaults</span>.<span class="pl-c1">rules</span>, {
      equals <span class="pl-k">:</span> {
          <span class="pl-en">validator</span> <span class="pl-k">:</span> <span class="pl-k">function</span>(<span class="pl-smi">value</span>, <span class="pl-smi">param</span>) {
              <span class="pl-k">return</span> value <span class="pl-k">==</span> <span class="pl-en">$</span>(param[<span class="pl-c1">0</span>]).<span class="pl-en">val</span>();
          },
          message <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>{1}<span class="pl-pds">'</span></span>
      }
  });

  <span class="pl-c">/**</span>
<span class="pl-c">   * Comparing equals whit other input</span>
<span class="pl-c">   */</span>
  <span class="pl-smi">$</span>.<span class="pl-en">extend</span>(<span class="pl-smi">$</span>.<span class="pl-smi">fn</span>.<span class="pl-smi">validatebox</span>.<span class="pl-smi">defaults</span>.<span class="pl-c1">rules</span>, {
      minLength <span class="pl-k">:</span> {
          <span class="pl-en">validator</span> <span class="pl-k">:</span> <span class="pl-k">function</span>(<span class="pl-smi">value</span>, <span class="pl-smi">param</span>) {
              <span class="pl-k">return</span> <span class="pl-smi">value</span>.<span class="pl-c1">length</span> <span class="pl-k">&gt;=</span> param[<span class="pl-c1">0</span>];
          },
          message <span class="pl-k">:</span> <span class="pl-smi">uiEx</span>.<span class="pl-smi">msg</span>.<span class="pl-smi">minLength</span>
      }
  });

})</pre>
  </div> </li> 
</ul> 
</div>

<div id="others" class="content_hide">
<div class="highlight highlight-source-js">
 <pre><span class="pl-c">/**</span>
<span class="pl-c"> * The control variable uiEx of transfer to first realize that its library</span>
<span class="pl-c"> * <span class="pl-k">@return</span> Object reference uiEx</span>
<span class="pl-c"> */</span>
<span class="pl-smi">uiEx</span>.<span class="pl-en">noConflict</span>();

<span class="pl-c">/*</span>
<span class="pl-c"> * The parentId type tree generates a transform function that is called in the loadFilter function of the tree component</span>
<span class="pl-c"> */</span>
<span class="pl-en">loadFilter</span><span class="pl-k">:</span><span class="pl-k">function</span>(<span class="pl-smi">rows</span>){
    <span class="pl-smi">uiEx</span>.<span class="pl-en">convert</span>(rows);
}</pre>
</div> 

</div>

</body>
</html>

